<template>
    <div class="dict-type"> 
        <el-card class="!border-none" shadow="never">
           
            <div class="mt-4" v-loading="pager.loading">
                <div>
                    <el-table
                        :data="pager.lists"
                        size="large" 
                    > 
                        <el-table-column label="ID" prop="id" width="80" />
                        <el-table-column label="操作者" prop="user_name" width="100" />
                        <el-table-column label="操作模块" prop="name"   width="140" >
                            <template v-slot="{ row }">
                                <el-tag :type="row.name.includes('删除') ? 'danger': row.name.includes('增加') ? 'success' : 'warning'">{{ row.name }}</el-tag> 
                            </template>
                        </el-table-column> 
                        <el-table-column label="访问地址" prop="url"   width="180" /> 
                        <el-table-column label="访问方式" prop="method"   width="100" /> 
                        <el-table-column label="访问参数" prop="params"  show-overflow-tooltip />  
                        <el-table-column label="操作者IP" prop="ip"  width="140" />
                        <el-table-column label="操作时间"   width="180" >
                            <template #default="{ row }"> 
                                {{ $formatDt(row.createdAt) }}
                             </template>
                        </el-table-column> 
                    </el-table>
                </div>
                <div class="flex justify-end mt-4">
                    <pagination v-model="pager" @change="getLists" />
                </div>
            </div>
        </el-card>
    </div>
</template>

<script setup name="loginlog">
import { getOperLog } from '@/apis/system/admin'
import { usePaging } from '@/hooks/usePaging'
 
 

const { pager, getLists } = usePaging({
    fetchFun: getOperLog, 
})
 

onMounted(() => {
  getLists()
})
</script>
